<template>
    <el-card class="box-card" style="height: 99.5%">

      <el-row :gutter="20">
        <el-col :span="12">
            <div>
              <el-card class="box-card" shadow="always" style="border-radius: 0px">
                <template #header>
                  <div class="card-header">
                    <span>上传文件</span>
                  </div>
                </template>
                 <!--from表单-->
                <div style="height: 368px;">
                  <el-form :model="form" ref="formRef" :rules="formRules" label-width="100px">
                     <el-form-item label="目标主机：" prop="server_ids">
                       <el-select class="m-2" filterable v-model="form.server_ids" @click="getServer" multiple placeholder="请选择" style="width: 100%">
                          <el-option v-for="row in server" :key="row.id" :label="row.name" :value="row.id">
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="上传目录：" prop="upload_dir">
                        <el-input v-model="form.upload_dir" placeholder="请输入上传目录" ></el-input>
                      </el-form-item>
                        <el-form-item label="上传文件：" prop="file">
                            <el-upload
                              :limit="1"
                              v-model:file-list="fileList"
                              :auto-upload="false"
                            >
                              <template #trigger>
                                <el-button type="primary">选择文件</el-button>
                              </template>
                            </el-upload>
                        </el-form-item>
                  </el-form>
                </div>
                    <span class="dialog-footer" style="display: flex; justify-content: center;">
                      <el-button type="primary" @click="submit">开始执行</el-button>
                    </span>
              </el-card>
            </div>
        </el-col>

        <el-col :span="12">
            <div>
              <el-card class="box-card" shadow="always" style="border-radius: 0px">
                <template #header>
                  <div class="card-header">
                    <span>查看文件</span>
                  </div>
                </template>
                <div style="height: 400px;overflow: auto">
                   <span v-if="result.length != 0">
                       <el-tag type="primary">{{start}}</el-tag>
                       <pre>{{result}}</pre>
                       <el-tag type="primary">{{end}}</el-tag>
                   </span>
                   <el-empty v-else description="暂无文件" />
                </div>
              </el-card>
            </div>
        </el-col>
      </el-row>

    </el-card>
</template>

<script>
    export default {
        name: "file",
        data(){
            return {
                fileList: [],
                result: '',
                start: '#####文件列表展示#####',
                end: '######文件列表展示#####',
                server: '',
                form: {
                    server_ids: '',
                    upload_dir: ''
                },
                 formRules: {
                    server_ids: [
                        {required: true, message: '请选择目标主机', trigger: 'blur'},
                    ],
                    upload_dir: [
                      {required: true, message: '请输入上传目录', trigger: 'blur'},
                    ],
                 },
            }
        },
        methods: {
          onRest(){
            this.$refs.formRef.resetFields();
          },
          // 获取主机
          getServer() {
              this.$http.get('/cmdb/server/')
                .then(res => {
                    this.server = res.data.data;
                })
            },
          submit() {
            this.$refs.formRef.validate((valid) => {
               if (valid) {
                if(!this.fileList.length) {
                    this.$message.warning('请上传文件')
                    return
                };
                  let fd = new FormData();
                  fd.append("file", this.fileList[0].raw);
                  fd.append('server_ids', this.form.server_ids);
                  fd.append('upload_dir', this.form.upload_dir);
                this.$http.post('/batch_file/', fd)
                  .then(res => {
                    if (res.data.code == 200){
                      this.result = res.data.data;
                      this.$message.success('分发成功');
                      // this.onRest(); //重置表单
                    }else {
                        this.result = res.data.data;
                        // this.onRest(); //重置表单
                      }
                   })
                   .catch(() => {
                    });
              } else {
                this.$message.error('格式错误！')
              }
            })
          },
        }
    }
</script>

<style scoped>

</style>